<template>
  <div class="static-wrap">
    <!-- 导航栏 -->
    <div class="self-nav">
      <div class="icon-wrapper" @click="back">
        <span class="icon-back"></span>
      </div>
    </div>
    <!-- 显示信息、数据统计 -->
    <div class="summary">
      自从您加入历辰阅读以来，
      总共阅读了 {{totalNum}} 本书，
      阅读完 {{finishedNum}} 本书；
      阅读总时长为：{{showTime}}小时；阅读书籍类型包含：{{cate.join(',')}}
    </div>
    <div class="static">
      <div class="title">书籍阅读信息统计</div>
      <div class="static-wrapper"><Static id="a" :options="options" v-if="showStatic"/></div>
    </div>
  </div>
</template>

<script>
import Static from '../../components/common/MyEchart'
import { statics } from '../../api/store'
import { categoryText, getCategoryName } from '../../utils/store'
export default {
  name: 'Statics',
  components: {
    Static
  },
  data() {
    return {
      totalNum: 0,
      finishedNum: 0,
      totalTime: 0,
      cate: [],
      showStatic: false,
      options: {}
    }
  },
  methods: {
    init() {
      // const { data } = this.options.series[0]
      // 获取统计的数据
      statics().then(({ results = [] }) => {
        this.totalNum = results.length
        this.finishedNum = (results.filter(item => item.l_read_percent === 100)).length
        this.totalTime = results.map(item => item.l_read_time).reduce((total, item) => item + total)
        const cateArr = results.map(item => item.category).map(item => categoryText(item, this))
        this.cate = [...new Set(cateArr)]
        console.log(this.cate)
        let show = []
        const cates = []
        results.forEach(item => {
          if (cates.includes(item.category)) {
            show.forEach(itemShow => {
              if (itemShow.name === item.category) {
                itemShow.value = itemShow.value + 1
              }
            })
          } else {
            show.push({ name: item.category, value: 1 })
            cates.push(item.category)
          }
        })
        console.log('show', show)
        show = show.map(item => {
          item.name = categoryText(item.name, this)
          return item
        })
        // this.options.series[0].data = show
        this.options = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '书籍的分类',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: show.sort(function (a, b) { return a.value - b.value }),
              roseType: 'radius',
              label: {
                color: '#fff'
              },
              labelLine: {
                lineStyle: {
                  color: '#fff'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        }
        this.showStatic = true
      })
    },
    back() {
      this.$router.go(-1)
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    showTime() {
      let showTime = 0
      if (this.totalTime % 36000 < 1800) {
        showTime = parseInt(this.totalTime / 3600)
      } else {
        showTime = parseInt(this.totalTime / 3600) + 1
      }
      return showTime
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/styles/global";

.static-wrap {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
  .self-nav {
    .text {
      margin-right: 10px;
    }
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }
  .summary {
    line-height: 30px;
    text-indent: 40px;
    margin-bottom: 30px;
  }
  .static {
    .title {
      text-align: center;
    }
    .static-wrapper {
      margin: 20px 0;
    }
  }
}
</style>
